1
00:00:00,660 --> 00:00:01,820
Hello and welcome.

2
00:00:01,830 --> 00:00:10,850
In this video we are going to create the project directory and also add the hastier mail.

3
00:00:11,100 --> 00:00:17,030
Some are going to create a directory on my desktop just by a right quiggin and a blank space.

4
00:00:17,130 --> 00:00:19,520
Click on new folder.

5
00:00:19,630 --> 00:00:22,020
And I'm just going to call this folder.

6
00:00:22,410 --> 00:00:24,260
Wait.

7
00:00:25,100 --> 00:00:27,540
Conversion.

8
00:00:27,720 --> 00:00:30,750
Feel free to call it whatever name you like.

9
00:00:30,840 --> 00:00:42,690
I will be using this sublime text editor for this part of the project so I'm going to do the kilogramme

10
00:00:42,690 --> 00:00:45,080
to pound conversion.

11
00:00:45,330 --> 00:00:49,690
So this hasty email file I'm going to save it.

12
00:00:51,410 --> 00:01:01,660
I'm saving it into the directory that I created and I'm going to call it cagy to point.

13
00:01:02,910 --> 00:01:10,240
So going to be call cagy to pound dot hastey EMAIL are click save.

14
00:01:10,440 --> 00:01:17,790
So this file now is will be hastier mail fast so if you look on the bottom right hand corner is go hastier

15
00:01:17,790 --> 00:01:18,660
mount on it.

16
00:01:18,930 --> 00:01:27,680
So I've already pre staged the hastier more code to make things easier and way into adding on an explain

17
00:01:27,680 --> 00:01:28,560
the code to you.

18
00:01:28,560 --> 00:01:29,970
Line by line.

19
00:01:30,420 --> 00:01:40,770
I have had the hastier mail for the kilogram two pound weight convert to someone to run through the

20
00:01:40,770 --> 00:01:42,930
cut line by a line.

21
00:01:42,930 --> 00:01:51,860
Line one here is the doc type the doc type is the first thing you have to indicate inside and hastier

22
00:01:51,890 --> 00:01:53,140
mail document.

23
00:01:53,460 --> 00:02:01,020
What this is saying is this is not actually part of the hate mail document itself is just a declaration

24
00:02:01,590 --> 00:02:08,620
to notify web browsers that the content of the document is hastier Mail 5.

25
00:02:08,820 --> 00:02:11,240
So that's what the doctype does.

26
00:02:11,610 --> 00:02:18,210
The actual host here mail begins on line to an end on line twenty three.

27
00:02:18,210 --> 00:02:26,850
So any content between line two and twenty three is the whole hastier male content.

28
00:02:27,240 --> 00:02:29,370
Line 3 here is it head section.

29
00:02:29,370 --> 00:02:31,480
Thus the open head section.

30
00:02:31,500 --> 00:02:36,700
This is the clues in head section on line 6 inside the head section.

31
00:02:36,720 --> 00:02:42,440
I've got a title which will display in the title part of the web browser.

32
00:02:42,750 --> 00:02:46,040
This will be the title for the application.

33
00:02:46,050 --> 00:02:54,240
It will see kg's to pounds weight converter so that the opening title tag that's close in title track

34
00:02:54,600 --> 00:02:55,990
here online.

35
00:02:56,190 --> 00:02:59,360
Got a link to an external style sheet.

36
00:02:59,370 --> 00:03:07,440
I'm going to be using I've already given it a name called cagy to P C since I will be creating that

37
00:03:08,040 --> 00:03:11,920
the sun probably in the next lecture.

38
00:03:12,450 --> 00:03:16,540
This is just some attributes are sociate it with the link.

39
00:03:16,770 --> 00:03:27,000
So this is a relative link tells it a style sheet type is a text slash C Ss Trev basically determines

40
00:03:27,000 --> 00:03:33,480
where the style sheet would be located because this going to be located inside the same directly.

41
00:03:33,510 --> 00:03:40,860
All I need to do is just specify the name for the stylesheet and then they mumble a call it is cagy

42
00:03:40,860 --> 00:03:43,260
to P C asset's.

43
00:03:43,590 --> 00:03:51,590
So that concludes the head section so the body section begins on line 7 and ends on line 22.

44
00:03:51,900 --> 00:03:57,990
So the actual visible content is inside the body tag.

45
00:03:58,440 --> 00:04:03,620
I am wrapping the outdoor content inside of it.

46
00:04:03,690 --> 00:04:09,460
Basically is a division of a page on the web page where you section off an area.

47
00:04:09,710 --> 00:04:14,360
So I've decided to call it giving Deve an attribute.

48
00:04:14,520 --> 00:04:19,820
I'll be using this idea attribute to stylesheet later with C assess.

49
00:04:19,870 --> 00:04:28,290
I'm giving it an idea of container because it's going to contain all the of the other elements we need

50
00:04:28,960 --> 00:04:30,630
here on line.

51
00:04:30,640 --> 00:04:32,690
I have given it a title.

52
00:04:32,690 --> 00:04:40,190
This would be the title for the converter to say with converter cagy to pounce here.

53
00:04:40,210 --> 00:04:49,200
This is a paragraph tag where it is prompting the user to enter their wheat value in KG k..

54
00:04:49,220 --> 00:04:55,250
Gone are the paragraph tag here and in between this paragraph tag and got a label.

55
00:04:55,320 --> 00:04:59,260
Basically a label will just display a text label.

56
00:04:59,410 --> 00:04:59,940
It's going to.

57
00:04:59,980 --> 00:05:00,830
Display.

58
00:05:01,890 --> 00:05:03,040
That's a first label.

59
00:05:03,040 --> 00:05:07,060
And then after that label we have an input.

60
00:05:07,390 --> 00:05:12,710
This is going to be where they will input the value in kilograms.

61
00:05:13,000 --> 00:05:14,920
So I've given the input.

62
00:05:15,240 --> 00:05:17,110
I added value of input.

63
00:05:17,110 --> 00:05:25,150
KG is the type is going to be in number and there is a place holder called kilogrammes or you have the

64
00:05:25,150 --> 00:05:33,820
place holder kg inside and here with quality on input attribute so busy always saying when you put a

65
00:05:33,820 --> 00:05:42,220
value tool for this wave combat this is going to be a jam Usk group function that I will be creating

66
00:05:42,220 --> 00:05:42,700
later.

67
00:05:42,700 --> 00:05:49,990
So when you impose a value this function here will do the conversion using the value you have input

68
00:05:50,040 --> 00:05:50,470
at.

69
00:05:50,580 --> 00:05:56,910
Okay so we're going to use this key word in combination with a value to do the conversion.

70
00:05:57,140 --> 00:06:05,380
And when the values change is this on change attribute also or core it's function again and change it

71
00:06:05,440 --> 00:06:07,540
to the new value added.

72
00:06:07,550 --> 00:06:14,530
So each time you change the value in the input it will contact this function here which it's a javascript

73
00:06:14,530 --> 00:06:21,670
function and that will display the new value on line 16.

74
00:06:21,670 --> 00:06:23,950
I've got another paragraph here.

75
00:06:24,130 --> 00:06:31,230
This is a paragraph that I truly outports the conversion weight in pounds.

76
00:06:31,390 --> 00:06:35,860
So it will see your weight in pounds and that is of course the span elemental here.

77
00:06:35,860 --> 00:06:47,020
So this band physically will add the value of this out to pounds whatever the output the conversion

78
00:06:47,040 --> 00:06:50,570
is it will add that to this text here.

79
00:06:50,590 --> 00:06:58,570
So you see your weight in pounds is whatever value that the function has computed it will add that to

80
00:06:58,570 --> 00:07:02,440
this last where we have this pan element here.

81
00:07:02,810 --> 00:07:07,700
All right so this is a close and Dave pan online 20 here and well a scrip tag.

82
00:07:08,080 --> 00:07:10,850
And we'll be using an external javascript.

83
00:07:10,890 --> 00:07:12,400
And this is our.

84
00:07:12,450 --> 00:07:17,530
Basically is this source is asking where to pick up the javascript.

85
00:07:17,530 --> 00:07:18,410
Far from.

86
00:07:18,610 --> 00:07:23,110
So there's going to be in the same direct terie as a hastier mail and csx.

87
00:07:23,110 --> 00:07:25,850
So all I need to do is specify the name.

88
00:07:25,960 --> 00:07:34,260
So I've called it cagy to p Duchess which is the name I will give it when I create it.

89
00:07:34,270 --> 00:07:38,760
So that's basically the hastier mail complete it.

90
00:07:38,790 --> 00:07:42,420
So I'm just going to click on file and save.

91
00:07:42,430 --> 00:07:45,420
And then we can quickly run it and see what it looks like.

92
00:07:45,460 --> 00:07:55,270
I'm just going to open up the directory and double click on this key to p and we can see what it looks

93
00:07:55,270 --> 00:08:00,190
like so this is what it looks like at the moment which is exactly what I want.

94
00:08:00,190 --> 00:08:02,840
This is the place order here go kg.

95
00:08:03,130 --> 00:08:06,210
You can see because the value of the input is a number.

96
00:08:06,270 --> 00:08:13,180
So you have these so you can use this to add a number or you can manually add the numbers.

97
00:08:13,250 --> 00:08:19,150
Nothing will happen at the moment because I have not added digenova scroop functionality yet but when

98
00:08:19,150 --> 00:08:22,470
I do it would display the conversion here.

99
00:08:22,930 --> 00:08:25,410
So that's it for this.

100
00:08:25,470 --> 00:08:28,400
Let's show him the next lecture.

101
00:08:28,450 --> 00:08:35,760
I am going to add the javascript functionality.

102
00:08:35,770 --> 00:08:37,030
Thanks for watching.

103
00:08:37,030 --> 00:08:38,180
By phone now.